<template>
    <el-cascader filterable :props="cascaderProps" style="width: 300px"
                 v-model="countryProvinceCity"
                 @change="$emit('change', $event)" clearable></el-cascader>
</template>

<script>

  import {getCountryCascader, getProvinceByCountry, getCityByProvince} from "@/youan/api/statistics/statistics";

  export default {
    name: "country-province-city-cascader",
    model: {
      prop: "countryProvinceCity",
      event: "change"
    },
    props: {
      countryProvinceCity: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        cascaderProps: {
          checkStrictly: true,
          lazy: true,
          async lazyLoad (node, resolve) {
            const { level, value } = node;
            let result;
            if(level == 0) {
              result = await getCountryCascader();
            }else if(level == 1) {
              result = await getProvinceByCountry(value);
            }else if(level == 2) {
              result = await getCityByProvince(value);
            }else {
              resolve([])
              return;
            }
            const nodes = result.data.data;
            for(let node of nodes) {
              node.leaf = level >= 2;
            }
            resolve(nodes);
          }
        },
      }
    }
  }
</script>

<style scoped>

</style>